<html>
<head>
  
    <script type="text/javascript" src="/public/javascripts/base64encode.js"></script>
	<script type="text/javascript" src="/public/javascripts/snapshot.js"></script>
</head>
<body>
<div class="snapshot-exclude">	
    	<center>This will be the captured image</center>
        #{form @Board.snap(eventId), onsubmit:'javascript:window.close()'}
		<input name="url" id="url" type="hidden" value="">
		<center>
		<br>
		<input name="name" id="name" type="text">
		<br>
		<button type="submit" onclick="snapshot()" >Confirm</button></center>
		#{/form}
	
    </div>
<div bgcolor="#000000">
    <table id="board" style="color:#00557d;-moz-border-radius-topleft:10px;;-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;"  width="100%" border = "10" class="draggable sortable">
       
       	 <tr>
            <th width="30%" align="center">
                <h3>STORIES</h3>
            </th>
        
            	
            #{list items:Status, as:'Status'}
            <th id="i" onmouseup="changef();">
                <h3>
                   
                        ${Status}
                   
                </h3>
            </th>
            #{/list}
        </tr>
        
        <td >
        <ul id="story">
            #{list items:Stories, as:'Stories'}
        <li id="${Stories.itemId}" style="list-style-type:none;">
                <div style="height:70px;background:#ffffd5;outline:solid 1px black;">
                    <label style="color:black;font-size:15px;padding:2px 2px 2px 2px">
                        ${Stories.Description}
                    </label>
                </div>
        </li>
            #{/list}
			</ul>
		
        </td>
		%{i=0;}%
        #{list items:allTasks, as:'allTasks'}
        %{no=allTasks
		ids=IDS[i];
		i++;
		}%
        <td id="${ids}" class="taskss">
           
		    
            	
                #{list items:no ,as: 'no'}
                
                    
                        <div id="${no.itemId}" style="height:40px;background:#e1f0ff;center:inherit;outline:solid 1px black;">
                            <label style="color:black;font-size:15px;padding:2px 2px 2px 2px">
                                ${no.Description}
                            </label>
                            <label style="color:black;font-size:15px;padding:2px 2px 2px 2px">
                               
                            </label>
                        </div>
                    
                
                #{/list}
				
            
			
        </td>
        #{/list} 
    </tr>
    </table>
</div>
<table>
    <tr>
        <td>
        </td>
        <td>
            <div>
                #{list items:users ,as:'user'}
                <div style="color: #333366 height: 50 px; width: 300 px;">
                    <img src="${user.image}" alt="noImage" width="40" height="50" align=middle alt="noImage" />
                    <label id="${user.getEntityId()}">
                        ${user.firstName} ${user.lastName} 
                    </label>
					<form>
                            <input type="checkbox" value="attend" onclick="attendant(user)"/>
                        </form>
                    </div>
                        <br>
                        #{/list}
                    </div>
            </td>
</table>
</div>
</body>
</html>